<template>
	<view class="post-detail">

		<view class="info">
			<view class="back-arrow" :style="{'padding-top': paddingTop}">
				<uni-icons @click="toBackPage" style="margin-left: 30rpx;" type="left" size="30" color="#2c2c2c">
				</uni-icons>
				<view style="display: flex;flex-direction: row;">
					<uni-icons style="margin-right: 40rpx;" type="more-filled" size="30" color="#2c2c2c"></uni-icons>
				</view>
			</view>



			<view class="post">
				<userInfoCard :userInfo="commentInfo.userInfo" themeColor="#E18427"></userInfoCard>
				<view style="margin-top: 30rpx;">{{commentInfo.content}}</view>

				<view class="post-bottom">

					<view class="date">{{commentInfo.gmtCreate}}</view>

					<view class="post-buttons">

						<view class="footer-item" v-if="commentInfo.isLike">
							<view class="footer-button" @click="likeOrCancelComment()">
								<uni-icons type="heart" size="22" color="#E18427"></uni-icons>
							</view>
							<view class="text">{{commentInfo.likeCount}}</view>
						</view>
						<view class="footer-item" v-else>
							<view class="footer-button" @click="likeOrCancelComment()">
								<uni-icons type="heart" size="22" color="#9a9a9a"></uni-icons>
							</view>
							<view class="text" style="color: #9a9a9a;">{{commentInfo.likeCount}}</view>
						</view>

						<view class="footer-item">
							<view class="footer-button" @click="clearReplyInput">
								<uni-icons type="chatbubble" size="25" color="#9a9a9a"></uni-icons>
							</view>
							<view class="text" style="color: #9a9a9a;">{{replies?replies.length:0}}</view>
						</view>

						<view class="footer-item" v-if="commentInfo.isMine">
							<view class="footer-button" @click="deleteComment()">
								<uni-icons type="trash" size="25" color="#9a9a9a"></uni-icons>
							</view>
						</view>

						<view class="footer-item">
							<view class="footer-button" @click="toReportComment()">
								<uni-icons type="redo" size="25" color="#9a9a9a"></uni-icons>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view style="background-color: #f9f9f9;">
				<view class="post-comments" v-if="replies != null && replies.length > 0">

					<view class="post-comments-query">
						<span style="font-weight: bold;font-size:36rpx;">全部回复</span>（{{replies.length}}条）
					</view>

					<view v-for="(reply,replyIndex) in replies">

						<view class="post-comment" style="background-color:#FFFFFF;">
							<view class="comment-top">
								<view style="display: flex;flex-direction: row;align-items: center;">
									<view class="avatar">
										<image mode="aspectFill" :src="reply.userInfo.avatar"></image>
									</view>
									<view class="nickname">{{reply.userInfo.nickname}}</view>
								</view>
								<uni-icons @click="toBackPage" type="more-filled" size="20" color="#c8c8c8">
								</uni-icons>
							</view>
							<view style="width: 590rpx;margin-left: 80rpx;">
								<span style="color: #a8a8a8;" v-if="reply.lastId">回复</span>
								<span style="color: #a8a8a8;font-weight: bold;" v-if="reply.lastId">{{reply.toNickname}}
									: </span>
								<span>{{reply.content}}</span>
							</view>


							<view class="comment-bottom">
								<view class="date">{{reply.gmtCreate}}</view>
								<view class="buttons">

									<view class="footer-item" v-if="reply.isLike">
										<view class="footer-button" @click="likeOrCancelReply(replyIndex)">
											<uni-icons type="heart" size="22" color="#E18427"></uni-icons>
										</view>
										<view class="text">{{reply.likeCount}}</view>
									</view>
									<view class="footer-item" v-else>
										<view class="footer-button" @click="likeOrCancelReply(replyIndex)">
											<uni-icons type="heart" size="22" color="#9a9a9a"></uni-icons>
										</view>
										<view class="text" style="color: #9a9a9a;">{{reply.likeCount}}</view>
									</view>

									<view class="footer-item">
										<view class="footer-button" @click="beginAddReply(replyIndex)">
											<uni-icons type="chatbubble" size="25" color="#9a9a9a"></uni-icons>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>


		<view class="comment-input" :style="{ 'margin-bottom' : isFocus ? '30rpx' : '0' }">
			<view class="content" :style="{ height:replyAddInput.lineCount*40+'rpx' }">
				<textarea style="width: 100%;margin-bottom: 10rpx;margin-top: 10rpx;max-height: 400rpx;overflow: scroll;"
					@linechange="lineChange"
					:style="{ height:replyAddInput.lineCount*40+'rpx' }"
					:show-confirm-bar="false" :placeholder="replyAddInput.toNickname" 
					v-model="replyAddInput.content"
					:focus="replyAddInput.focus" />
			</view>
			<view style="color: gray;" @click="addReply()">回复</view>
		</view>

	</view>
	</view>
</template>

<script>
	import userInfoCard from '@/components/user-info-card.vue'
	export default {
		components: {
			userInfoCard
		},
		data() {
			return {
				islandInfo: {},
				commentInfo: {
					userInfo: {
						avatar: "https://img.ixintu.com/download/jpg/20210209/9e842a3dbf66252db019066904662f47_512_512.jpg!bg"
					}
				},
				replies: [],

				replyAddInput: {
					lineCount: 1,
					toId: null,
					toNickname: "书写你的赞美",
					content: "",
					visibility: 2,
					postCommentId: null,
					replyIndex: 0,
					lastId: null,
					focus: false
				},
				
				paddingTop: null
			}
		},
		onLoad(options) {
			if (options.commentId) {
				this.commentInfo.id = options.commentId
				this.getCommentInfo()
				this.listReply()
			}

			// 调整搜索位置
			// #ifdef MP-WEIXIN
			// 1.获取屏幕可使用宽度
			let windowWidth = uni.getSystemInfoSync().windowWidth;
			// 3.获取胶囊按钮位置信息
			const menuButton = uni.getMenuButtonBoundingClientRect();
			// // 5.导航栏与状态栏拉开距离  margin-top: statusBarTop + 'rpx';
			this.paddingTop = menuButton.top * (750 / windowWidth) + 'rpx';
			// #endif
		},
		methods: {
			getCommentInfo() {
				this.$api.getCommentInfo({
					id: this.commentInfo.id
				}).then(res => {
					this.commentInfo = res.data

					this.replyAddInput = {
						toId: this.commentInfo.userInfo.id,
						toNickname: "回复：" + this.commentInfo.userInfo.nickname,
						content: "",
						postCommentId: this.commentInfo.id,
						replyIndex: 0,
						replyId: null,
						focus: false
					}
				})
			},

			listReply() {
				this.$api.listReply({
					commentId: this.commentInfo.id
				}).then(res => {
					this.replies = res.data
				})
			},

			lineChange(e) {
				this.replyAddInput.lineCount = e.detail.lineCount
				this.$forceUpdate()
			},










			beginAddReply(replyIndex) {
				this.replyAddInput = {
					toId: this.replies[replyIndex].userInfo.id,
					toNickname: "回复：" + this.replies[replyIndex].userInfo.nickname,
					content: "",
					postCommentId: this.commentInfo.id,
					replyIndex: replyIndex,
					lastId: this.replies[replyIndex].id,
					focus: true
				}
			},

			clearReplyInput() {
				this.replyAddInput = {
					toId: this.commentInfo.userInfo.id,
					toNickname: "回复：" + this.commentInfo.userInfo.nickname,
					content: "",
					postCommentId: this.commentInfo.id,
					replyIndex: 0,
					lastId: null,
					focus: false
				}
			},
			deleteComment() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定删除本条评论吗？',
					success(res) {
						if (res.confirm) {
							that.$api.deleteComment({
								id: that.commentInfo.id
							}).then(res => {
								uni.navigateBack()
							})
						}
					}
				});
			},

			toReportReply() {
				uni.showModal({
					title: '提示',
					content: '确定举报本条回复吗？',
					success(res) {
						if (res.confirm) {
							uni.showModal({
								title: "举报成功"
							})
						}
					}
				});
			},

			toReportComment() {
				uni.showModal({
					title: '提示',
					content: '确定举报本条评论吗？',
					success(res) {
						if (res.confirm) {
							uni.showModal({
								title: "举报成功"
							})
						}
					}
				});
			},

			likeOrCancelPost() {
				this.$api.likeOrCancelPost({
					id: this.postInfo.id
				}).then(res => {
					if (this.postInfo.isLike) {
						this.postInfo.likeCount--
						this.postInfo.isLike = false
					} else {
						this.postInfo.likeCount++
						this.postInfo.isLike = true
					}
				})
			},

			likeOrCancelComment() {
				this.$api.likeOrCancelComment({
					commentId: this.commentInfo.id
				}).then(res => {
					if (this.commentInfo.isLike) {
						this.commentInfo.likeCount--
						this.commentInfo.isLike = false
					} else {
						this.commentInfo.likeCount++
						this.commentInfo.isLike = true
					}
				})
			},

			likeOrCancelReply(index) {
				this.$api.likeOrCancelReply({
					replyId: this.replies[index].id
				}).then(res => {
					if (this.replies[index].isLike) {
						this.replies[index].likeCount--
						this.replies[index].isLike = false
					} else {
						this.replies[index].likeCount++
						this.replies[index].isLike = true
					}
				})
			},



			addReply() {
				this.$api.addReply(this.replyAddInput).then(res => {
					this.replies.push(res.data)
					this.clearReplyInput()
				})
			},


			ViewImage(pictures, url) {
				uni.previewImage({
					urls: pictures,
					current: url
				});
			},
			toBackPage() {
				uni.navigateBack({
					delta: 1, //返回层数，2则上上页
				})
			},
			toEditPost() {
				uni.navigateTo({
					url: "/pages_being/island/post-create?postId=" + this.postInfo.id
				})
			},
			toAddPost() {
				uni.navigateTo({
					url: "/pages_being/island/post-create?islandId=" + this.islandInfo.id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.post-detail {

		.top-background {
			position: fixed;
			z-index: 1;

			width: 100%;
			height: 450rpx;

			background-repeat: no-repeat;
			background-size: cover;


			.mask {
				height: 100%;
				width: 100%;
				position: absolute;
				top: 0;
				left: 0rpx;
				background: linear-gradient(to top, rgba(0, 0, 0, 0.5)0%, rgba(67, 72, 92, 0)100%);
				z-index: 2;
			}
		}

		.info {
			position: relative;
			z-index: 2;

			display: flex;
			flex-direction: column;

			padding-bottom: 120rpx;




			.back-arrow {
				width: 100%;

				//#ifdef MP-WEIXIN
				width: 550rpx;
				//#endif

				padding-top: 100rpx;

				// #ifdef H5
				padding-top: 40rpx;
				// #endif

				height: 40rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}

			.post {
				width: 670rpx;
				background-color: #FFFFFF;
				border-radius: 20rpx;
				margin-left: 40rpx;
				margin-top: 60rpx;
				margin-bottom: 30rpx;

				.pictures {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					margin: 30rpx 0 20rpx 0;

					width: 100%;
					flex-wrap: wrap;

					.picture {
						width: 210rpx;
						height: 210rpx;
						border-radius: 10rpx;
						overflow: hidden;
					}
				}



				.post-bottom {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;

					.date {
						font-size: 28rpx;
						color: gray;
					}

					.post-buttons {
						display: flex;
						flex-direction: row;
						justify-content: flex-end;
						align-items: center;


						.footer-item {
							margin-left: 40rpx;
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							align-items: center;

							.text {
								font-size: 28rpx;
								margin-left: 10rpx;
								color: #E18427;
							}

							.footer-button {
								height: 60rpx;
								display: flex;
								flex-direction: column;
								justify-content: center;
								align-items: center;
								border-radius: 50rpx;
								color: white;
							}
						}
					}

				}

			}



			.post-comments {
				display: flex;
				flex-direction: column;
				padding-bottom: 100rpx;
				background-color: #FFFFFF;
				margin-top: 20rpx;

				.post-comments-query {
					width: 670rpx;
					margin-left: 40rpx;
					margin-top: 30rpx;
				}


				.post-comment {
					width: 670rpx;
					background-color: #FFFFFF;
					border-radius: 20rpx;
					margin-left: 40rpx;
					margin-top: 40rpx;

					.comment-top {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;

						.avatar {
							width: 70rpx;
							height: 70rpx;
							border-radius: 50%;
							overflow: hidden;
						}


						.nickname {
							margin-left: 20rpx;
							font-weight: bold;
						}


					}





					.avatar {
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
						overflow: hidden;
					}


					.comment-bottom {
						width: 590rpx;
						margin-left: 80rpx;
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;

						.date {
							font-size: 28rpx;
							color: gray;
						}

						.buttons {
							display: flex;
							flex-direction: row;
							justify-content: flex-end;

							.footer-item {
								margin-top: 20rpx;
								margin-left: 20rpx;
								display: flex;
								flex-direction: row;
								justify-content: space-between;
								align-items: center;

								.text {
									font-size: 28rpx;
									margin-left: 10rpx;
									color: #E18427;
								}

								.footer-button {
									display: flex;
									flex-direction: column;
									justify-content: center;
									align-items: center;
								}
							}
						}




					}

					.comment-replies {
						width: 550rpx;
						margin-left: 80rpx;
						border-radius: 20rpx;
						padding: 20rpx;
						margin-top: 20rpx;
						background-color: #FAFAFA;
					}
				}
			}

		}


		.comment-input {
			width: 100%;
			background-color: #ffffff;

			position: fixed;
			z-index: 2;
			bottom: 0;


			display: flex;
			flex-direction: row;
			align-items: center;


			padding: 30rpx 10rpx;
			border-top: 1px solid #d5d5d5;


			.content {
				margin-right: 30rpx;
				border: 1rpx solid #d5d5d5;
				border-radius: 10rpx;

				width: 560rpx;
				margin-left: 20rpx;
				max-height: 420rpx;


				padding: 20rpx;
				height: 40rpx;


				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
			}
		}

		.page-btns {
			display: flex;
			position: fixed;
			right: 100rpx;
			bottom: 100rpx;
			z-index: 10;


			.button {
				width: 90rpx;
				height: 90rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				background-color: rgba(240, 240, 240, 1.0);
				border-radius: 50rpx;
				color: white;
			}
		}
	}

	image {
		width: 100%;
		height: 100%;
	}
</style>
